<template>
  <div class="create-chart-module">
    <Title title="图表样式选择" style="margin-bottom: 16px" />
    <div class="chart-list" style="margin-bottom: 24px;">
      <SelectChartType v-model="dataForm.type" @selectChartTypev="selectChartType" />
    </div>
    <Title title="图表样式配置" style="margin-bottom: 16px" />
    <el-form :model="dataForm" label-position="right" label-width="80px">
      <el-form-item label="模块宽度" size="small" prop="layoutNum">
        <el-select v-model="dataForm.layoutNum" class="width240" popper-class="global-select-down" name="layoutNum">
          <el-option
            v-for="item in layoutOptions"
            :key="item.id"
            :label="item.name"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form ref="formDataRef" :model="dataForm" :rules="formRules" label-position="right" label-width="80px">
      <el-form-item label="图表元素" prop="chartOpt" class="is-required" style="margin-bottom: 20px;">
        <el-checkbox v-model="dataForm.showXAxis" :disabled="dataForm.type === 3 || dataForm.type === 6">横轴</el-checkbox>
        <el-checkbox v-model="dataForm.showYAxis" :disabled="dataForm.type === 3 || dataForm.type === 6">纵轴</el-checkbox>
        <!-- <el-checkbox v-model="dataForm.isAxis" :disabled="dataForm.type === 3 || dataForm.type === 6">坐标轴</el-checkbox> -->
        <el-checkbox v-model="dataForm.isDataLabel">数据标签</el-checkbox>
        <el-checkbox v-model="dataForm.isGrid" :disabled="dataForm.type === 3 || dataForm.type === 6">网格线</el-checkbox>
        <el-checkbox v-model="dataForm.isLegend">图例项</el-checkbox>
        <el-checkbox v-if="[3, 6].includes(dataForm.type)" v-model="dataForm.isLabelWithLegend">数据标签展示图例项</el-checkbox>
      </el-form-item>
      <el-form-item label="图表颜色" prop="chartOpt" class="is-required" style="margin-bottom: 20px;">
        <div class="flex">
          <ChartColorSelector v-model="dataForm.chartColor" :chart-color-list="allColorList" />
          <el-checkbox v-model="dataForm.isGradient" class="checkbox">使用渐变色</el-checkbox>
        </div>
      </el-form-item>
    </el-form>
    <StyleSetting ref="stySetting" :is-show-header="false" module="chart" />
  </div>
</template>

<script>
import { layoutOptions, chartTypeListWithChildren, chartColorList } from '@/filters/status';
import Title from '@/components/Title';
import StyleSetting from '@/components/ReportManage/chartCreate/commonStySetting/styleDiy';
import ChartColorSelector from '@/components/ReportManage/ChartColorSelector';
import { mapState } from 'vuex';
import SelectChartType from './selectChartType';

export default {
  components: { Title, StyleSetting, ChartColorSelector, SelectChartType },
  model: {
    prop: 'dataForm',
    event: 'changeData'
  },
  props: {
    dataForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      layoutOptions, chartColorList,
      chartTypeListWithChildren,
      formRules: {
        type: [{ required: true, trigger: 'change', message: '请选择图表类型' }]
      }
    };
  },
  computed: {
    ...mapState({
      'colorList': state => state.options.colorList
    }),
    allColorList() {
      return [...chartColorList, ...this.colorList];
    }
  },
  created() {
    this.getColor();
  },
  methods: {
    /**
     * change
     */
    chartTypeChange() {
      if (this.dataForm.type === 13) {
        if (typeof this.dataForm.yAxis !== 'string') this.dataForm.yAxis = '';
      } else {
        if (typeof this.dataForm.yAxis === 'string') this.dataForm.yAxis = [];
      }
      this.changeData();
    },
    changeData() {
      this.$emit('changeData', this.dataForm);
    },
    getData() {
      if (this.$refs.stySetting) {
        this.dataForm.styleConfig = this.$refs.stySetting.getStyle();
      }
      this.changeData();
      return JSON.parse(JSON.stringify(this.dataForm));
    },
    selectChartType(chart) {
      this.$set(this.dataForm, 'yAxisCombo', '');
      // this.$set(this.dataForm, 'yAxis', []);
      if (chart.id === 13) {
        this.$set(this.dataForm, 'yAxis', '');
      }
      this.dataForm.type = chart.id;
      this.changeData();
    },
    setStyleDefault(data) {
      if (this.$refs.stySetting) {
        this.$refs.stySetting.setDefault(data);
      }
    },
    getColor() {
      if (this.colorList.length === 0) {
        this.$store.dispatch('GetColorList');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.create-chart-module {
  margin-top: 26px;
  padding-bottom: 50px;
  .one-cell {
    display: flex;
  }
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}

.flex {
  display: flex;
  .checkbox {
    margin-left: 15px;
  }
}
</style>
